<template>
  <div>
    <el-dialog title="新增角色" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <el-input v-model="roleName"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    roleAdd,
    roleUpdate
  } from '@/api/role'
  import {
    isEmpty
  } from '@/utils/validate'

  export default {
    data() {
      return {
        dialogVisible: false,
        roleId: null,
        roleName: null,
      }
    },
    methods: {
      async save() {
        //参数校验
        if (isEmpty(this.roleName)) {
          this.$utils.showErrorMessage('角色名称不能为空');
          return;
        }
        //提交
        var res = null;
        if (isEmpty(this.roleId)) {
          //新增
          res = await roleAdd(this.roleName);
        } else {
          //修改
          var params = {
            roleId: this.roleId,
            roleName: this.roleName
          };
          res = await roleUpdate(params);
        }
        this.$utils.showSuccessMessage(res.msg)
        this.chancel();
        this.$parent.loadRoleTree();
      },

      open(roleId, roleName) {
        this.roleId = roleId;
        this.roleName = roleName;
        this.dialogVisible = true;
      },
      
      chancel() {
        this.dialogVisible = false;
        this.roleId = null;
        this.roleName = null;
      },

    }
  }
</script>

<style>

</style>
